<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>

<script>
    // ele.addEventListener(type,callback)   // 绑定自定义事件
    // ele.removeEventListener(type,callback)  // 删除自定义事件
    // ele.dispatchEvent(type,new Event('type'))   // 触发自定义事件

    vm = new Vue({
        el:"#app",
    })

    console.log(vm);

    /* 
        vm.$on(type,callback)   // 绑定自定义事件, 
            type 自定义事件名称
            callback  自定义事件触发时执行的回调函数, 回调函数有一个参数接收事件触发时传入的数据

        vm.$off(type,callback)   // 清除自定义事件
            type 自定义事件名称
            callback 对应回调函数引用清除

        vm.$emit(type,data)   // 触发自定义事件
            type 自定义事件名称  => 对应事件类型触发
            data  事件触发时传入的数据     
    
    */


    /* vm.$on("laowang-event",function(){
        console.log("laowang-event触发了");
    })
    vm.$on("laowang-event",function(arg){
        console.log("laowang 学习Vue",arg);
    })

    vm.$off("laowang-event",function(){
        console.log("laowang-event触发了");
    })
    vm.$off("laowang-event",function(arg){
        console.log("laowang 学习Vue",arg);
    })

    vm.$emit("laowang-event","星期6"); */

    let callback1 = function(){
        console.log("laowang-event触发了");
    }

    let callback2 = function(arg){
        console.log("laowang 学习Vue",arg);
    }

    vm.$on("laowang-event",callback1);
    vm.$on("laowang-event",callback2);
   

    vm.$off("laowang-event",callback1);
    vm.$off("laowang-event",callback2);

    vm.$emit("laowang-event","星期6");

</script>
</html>